<template>
  <div>
    <template v-if="props.num == 1">
      输入参数&nbsp;
      <a-button class="editable-add-btn" type="primary" style="margin-bottom: 8px" @click="handleAdd">新增参数</a-button>
    </template>
    <template v-else-if="props.num == 2">
      请求Body&nbsp;
      <a-button class="editable-add-btn" type="primary" style="margin-bottom: 8px" @click="handleAdd">新增参数</a-button>&nbsp;
      <a-button type="primary" @click="handleClickJsonIn">Json数据导入</a-button>
    </template>
    <template v-else>
      返回参数&nbsp;
      <a-button class="editable-add-btn" type="primary" style="margin-bottom: 8px" @click="handleAdd">新增参数</a-button>&nbsp;
      <a-button type="primary" @click="handleClickJsonIn">Json数据导入</a-button>
    </template>
    <!-- 人工注册第二步界面的表格组件 -->
    <a-table bordered :data-source="dataSource1" :columns="props.column" :pagination="false">
      <template #bodyCell="{ column, text, record }">
        <!-- <a-form :name="`form${record.portsId}`" :model="editableData[record.portsId]" @finish="onFinish" @finishFailed="onFinishFailed"> -->
        <template v-if="['paramsName'].includes(column.dataIndex)">
          <div class="editable-cell">
            <template v-if="editableData[record.portsId]">
              <!-- <a-form-item :validate-status="'success'" :help="''" :name="column.dataIndex"> -->
              <a-form-item :validate-status="record.errorMsgShows[column.dataIndex].validateStatus" :help="record.errorMsgShows[column.dataIndex].errorMsg" :name="column.dataIndex">
                <a-input
                  v-model:value="editableData[record.portsId][column.dataIndex]"
                  style="margin: -5px 0"
                  @change="handleChange(editableData[record.portsId][column.dataIndex], column.dataIndex, record)"
                />
              </a-form-item>
            </template>
            <template v-else>
              {{ text }}
              <!-- {{ editableData[record.portsId] }} -->
            </template>
          </div>
        </template>
        <template v-if="['returnName', 'bodyName'].includes(column.dataIndex)">
          <div class="editable-cell">
            <template v-if="editableData[record.portsId]">
              <!-- <a-form-item :validate-status="'success'" :help="''" :name="column.dataIndex"> -->
              <a-form-item :validate-status="record.errorMsgShows[column.dataIndex].validateStatus" :help="record.errorMsgShows[column.dataIndex].errorMsg" :name="column.dataIndex">
                <a-input
                  v-model:value="editableData[record.portsId][column.dataIndex]"
                  style="margin: -5px 0"
                  @change="handleChange(editableData[record.portsId][column.dataIndex], column.dataIndex, record)"
                />
              </a-form-item>
            </template>
            <template v-else>
              {{ text }}
              <!-- {{ editableData[record.portsId] }} -->
            </template>
          </div>
        </template>
        <template v-if="['paramsDefault', 'bodyDefault', 'paramsMsg', 'bodyMsg', 'returnMsg'].includes(column.dataIndex)">
          <div class="editable-cell">
            <template v-if="editableData[record.portsId]">
              <a-form-item :name="column.dataIndex">
                <a-input v-model:value="editableData[record.portsId][column.dataIndex]" style="margin: -5px 0" />
              </a-form-item>
            </template>
            <template v-else>
              {{ text }}
              {{ editableData[record.portsId] }}
            </template>
          </div>
        </template>
        <template v-else-if="['paramsType'].includes(column.dataIndex)">
          <div class="editable-cell">
            <template v-if="editableData[record.portsId]">
              <a-form-item :name="column.dataIndex">
                <a-select
                  v-model:value="editableData[record.portsId][column.dataIndex]"
                  style="margin: -5px 0"
                  :options="paramsTypeOptions"
                  @change="handleChange(editableData[record.portsId][column.dataIndex], column.dataIndex, record)"
                >
                </a-select></a-form-item
            ></template>
            <template v-else> {{ ParamsTypes[text] }} </template>
          </div>
        </template>
        <template v-else-if="['paramsPath'].includes(column.dataIndex)">
          <div class="editable-cell">
            <template v-if="editableData[record.portsId]">
              <a-form-item :name="column.dataIndex">
                <a-select
                  v-model:value="editableData[record.portsId][column.dataIndex]"
                  style="margin: -5px 0"
                  :options="paramsPathOptions"
                  @change="handleChange(editableData[record.portsId][column.dataIndex], column.dataIndex, record)"
                >
                </a-select></a-form-item
            ></template>
            <template v-else>
              {{ paramsPaths[text] }}
            </template>
          </div>
        </template>
        <template v-else-if="['bodyType', 'returnType'].includes(column.dataIndex)">
          <div class="editable-cell">
            <template v-if="editableData[record.portsId]">
              <a-form-item :name="column.dataIndex">
                <a-select
                  v-model:value="editableData[record.portsId][column.dataIndex]"
                  style="margin: -5px 0"
                  :options="bodyAndreturnTypeOptions"
                  @change="handleChange(editableData[record.portsId][column.dataIndex], column.dataIndex, record)"
                >
                </a-select></a-form-item
            ></template>
            <template v-else>
              {{ BodyTypes[text] }}
            </template>
          </div>
        </template>
        <template v-else-if="['paramsIsNull', 'bodyIsNull'].includes(column.dataIndex)">
          <div class="editable-cell">
            <template v-if="editableData[record.portsId]">
              <a-form-item :name="column.dataIndex">
                <a-select
                  v-model:value="editableData[record.portsId][column.dataIndex]"
                  style="margin: -5px 0"
                  :options="isNullOptions"
                  @change="handleChange(editableData[record.portsId][column.dataIndex], column.dataIndex, record)"
                >
                </a-select></a-form-item
            ></template>
            <template v-else>
              {{ isNullTypes[text] }}
            </template>
          </div>
        </template>
        <!-- 操作 -->
        <template v-else-if="column.dataIndex == 'operation'">
          <div class="editable-row-operations">
            <span v-if="editableData[record.portsId]">
              <a-form-item
                ><a-typography-link @click="save(record, record.portsId)"><a-button type="primary" :form="`form${record.portsId}`" html-type="submit">保存</a-button></a-typography-link> &nbsp;
                <a-popconfirm title="确定取消?" @confirm="cancel(record.portsId)"> <a-button type="primary">取消</a-button> </a-popconfirm>
                <template v-if="record.paramsType == '1' || record.paramsType == '2'">
                  &nbsp;<a-popover trigger="click" title="码值定义">
                    <template #content>
                      <p>
                        <a-button type="primary" @click="showSavedModal">已保存码值(已引用码表)</a-button>
                      </p>
                      <p>
                        <a-button type="primary" @click="showNodModal">未保存码值(未引用码表)</a-button>
                      </p>
                    </template>
                    <a-button type="primary">码值定义</a-button>
                  </a-popover>
                </template>
              </a-form-item>
            </span>
            <span v-else>
              <!-- {{record}} -->
              <a-button type="primary" @click="edit(record, record.portsId)">编辑</a-button>&nbsp;
              <a-popconfirm v-if="dataSource.length > -1" title="确定删除?" @confirm="onDelete(record, record.portsId)"> <a-button type="primary">删除</a-button></a-popconfirm>
              <template v-if="[record.returnType, record.bodyType].includes(2) || [record.returnType, record.bodyType].includes(3)"
                >&nbsp;
                <a-button type="primary" @click="showCodeDetailsModal(record.portsId)">码值详情</a-button>
              </template>
              <template v-else-if="[record.returnType, record.bodyType].includes(1) || [record.returnType, record.bodyType].includes(5)"
                >&nbsp;
                <a-button type="primary" @click="addson(record)">添加下级</a-button>
              </template>
            </span>
          </div>
        </template>
        <!-- </a-form> -->
      </template>
    </a-table>
  </div>
  <!-- 码值详情 -->
  <code-details :visible-code-details-modal="visibleCodeDetailsModal" @code-details-show="showCodeDefineDialog"></code-details>
  <!-- 码值定义弹窗 -->
  <define-code :define-code-value="defineCodeValue" :is-saved="isSaved" @change-show="showSavedCodeDialog" @unquote-successed="handleUnquoteSuccessed"></define-code>
  <!-- JSON数据导入弹窗 -->
  <json-data-in :visible-json-data-modal="visibleJsonDataModal" @json-data-in-show="handleJsonDataInShow"></json-data-in>
</template>
<script setup lang="ts">
  import { cloneDeep } from 'lodash-es';
  import { Ref, UnwrapRef } from 'vue';
  import CodeDetails from './CodeDetails.vue';
  import defineCode from './defineCode.vue';
  import jsonDataIn from './jsonDataIn.vue';
  import { DataItemInput, DataItemBody, DataItemBack } from '../../type/index';
  import { ParamsTypes, isNullTypes, paramsPaths, BodyTypes } from '../enum/enums';
  import { useStore } from '../pinia/pinia';
  import { message } from 'ant-design-vue';
  const props = defineProps({
    num: {
      type: Number,
    },
    addCodeTable: {
      type: Boolean,
      default: false,
    },
    dialogStatue: {
      type: String,
    },
    codeDialogName: {
      type: Boolean,
    },
    column: {
      type: Array,
      default: () => [],
    },
    dataSource: {
      type: Array<DataItemInput | DataItemBody | DataItemBack>,
      default: () => [],
    },
  });
  interface infos {
    errorMsg: string;
    validateStatus: string;
  }
  const pinia = useStore();
  const bodyAndreturnTypeOptions = [
    {
      //1:Object;2:String;3:Int;4:Float;5:Array
      value: 1,
      label: 'Object',
    },
    {
      value: 2,
      label: 'String',
    },
    {
      value: 3,
      label: 'Int',
    },
    {
      value: 4,
      label: 'Float',
    },
    {
      value: 5,
      label: 'Array',
    },
  ];
  const paramsTypeOptions = [
    //1:String;2:Int;3:Float
    {
      value: 1,
      label: 'String',
    },
    {
      value: 2,
      label: 'Int',
    },
    {
      value: 3,
      label: 'Float',
    },
  ];
  const isNullOptions = [
    {
      value: 1,
      label: '否',
    },
    {
      value: 2,
      label: '是',
    },
  ];
  const paramsPathOptions = [
    {
      value: 1,
      label: 'query',
    },
    {
      value: 2,
      label: 'path',
    },
  ];
  // interface DataItem1 {
  //   codesId: string | null;
  //   portsId: number | null;
  //   paramsName: string;
  //   paramsPath: number | string;
  //   paramsIsNull: number;
  //   paramsType: number | string;
  //   paramsDefault: string | null;
  //   paramsMsg: string | null;
  //   paramsParents?: number | null;
  //   children?: DataItem1[];
  //   errorMsgShows?: {
  //     paramsName: infos;
  //     paramsPath: infos;
  //     paramsType: infos;
  //     paramsIsNull: infos;
  //   };
  // }
  let errorMsgShows = {};
  let validatorRules = {};
  if (props.num == 1) {
    errorMsgShows = {
      paramsName: {
        errorMsg: '',
        validateStatus: 'success',
      },
      paramsType: {
        errorMsg: '',
        validateStatus: 'success',
      },
      paramsIsNull: {
        errorMsg: '',
        validateStatus: 'success',
      },
      paramsPath: {
        errorMsg: '',
        validateStatus: 'success',
      },
    };
    validatorRules = {
      paramsName: {
        required: true,
        requiredMessage: '请输入参数名称',
        // validator(value) {
        //   console.log(value);
        // },
      },
      paramsPath: {
        required: true,
        requiredMessage: '请选择参数位置',
      },
      paramsType: {
        required: true,
        requiredMessage: '请选择参数类型',
      },
      paramsIsNull: {
        required: true,
        requiredMessage: '请选择是否为空',
      },
    };
  } else if (props.num == 2) {
    errorMsgShows = {
      bodyName: {
        errorMsg: '',
        validateStatus: 'success',
      },
      bodyType: {
        errorMsg: '',
        validateStatus: 'success',
      },
      bodyIsNull: {
        errorMsg: '',
        validateStatus: 'success',
      },
    };
    validatorRules = {
      bodyName: {
        required: true,
        requiredMessage: '请输入参数名称',
        // validator(value) {
        //   console.log(value);
        // },
      },
      bodyType: {
        required: true,
        requiredMessage: '请选择参数类型',
      },
      bodyIsNull: {
        required: true,
        requiredMessage: '请选择是否为空',
      },
    };
  } else {
    errorMsgShows = {
      returnName: {
        errorMsg: '',
        validateStatus: 'success',
      },
      returnType: {
        errorMsg: '',
        validateStatus: 'success',
      },
    };
    validatorRules = {
      returnName: {
        required: true,
        requiredMessage: '请输入参数名称',
        // validator(value) {
        //   console.log(value);
        // },
      },

      returnType: {
        required: true,
        requiredMessage: '请选择参数类型',
      },
    };
  }
  let editableData: UnwrapRef<Record<number, DataItemInput | DataItemBody | DataItemBack>> = reactive({});
  const addKey = (loopArr: (DataItemInput | DataItemBody | DataItemBack)[], currentStep = 0, pId = 0) => {
    const configs: (DataItemInput | DataItemBody | DataItemBack)[] = [];
    // console.log(loopArr, currentStep, pId, '元素循环次数');
    loopArr.forEach((item, index) => {
      if (!item.children || item.children.length < 1) {
        const t = {
          ...item,
          key: currentStep == 0 ? index.toString() : pId + '_' + index,
          errorMsgShows: errorMsgShows,
        };
        t.children = undefined;
        configs.push(t);
      }
      if (item.children && item.children.length > 0) {
        const parent = {
          ...item,
          key: currentStep == 0 ? index.toString() : pId + '_' + index,
          errorMsgShows: errorMsgShows,
        };
        parent.children = addKey(item.children, currentStep + 1, parent.key);
        configs.push(parent);
      }
    });
    // console.log(configs, '构造数据');
    return configs;
  };
  let { dataSource } = { ...props };
  let dataSource1: Ref<(DataItemInput | DataItemBody | DataItemBack)[]> = ref([]);
  dataSource1.value = addKey(dataSource, 0, 0); //赋值了
  console.log(dataSource1.value, '222222222222222222222222222');
  const changeDatas = dataSource => {
    if (props.num == 1) {
      pinia.getdataSourceone(dataSource);
    } else if (props.num == 2) {
      pinia.getdataSourcetwo(dataSource);
    } else {
      pinia.getdataSourcethree(dataSource);
    }
  };
  changeDatas(dataSource);
  const edit = (record: any, keys: number) => {
    //num是 key  就是 '0' 或者是 '0_0'之类的
    // let arr1 = record.key.split('_');
    // console.log(record, '666666');
    editableData[keys] = cloneDeep(record);
    // if (arr1.length == 1) {
    //   editableData[keys] = cloneDeep(dataSource1.value.filter(item => keys === item.portsId)[0]);
    //   // console.log(dataSource1.value.filter(item => keys === item.portsId)[0], '21111');
    // } else if (arr1.length == 2) {
    //   editableData[keys] = cloneDeep(
    //     dataSource1.value.filter(item => {
    //       if (item.children) {
    //         return item.children.filter(i => keys == i.portsId);
    //       }
    //       console.log(item);
    //       // console.log(hh, 'hhhhhhhhhhhhhhh');
    //     })[0],
    //   );
    // }
    // console.log(editableData[keys], '++++219');
    console.log(editableData[keys], 'kankan');
  };
  // 码值定义小气泡
  let visible = ref<boolean>(false);
  // 保存时校验规则
  const save = (record: any, keys: number) => {
    console.log(record, '259');
    const arr2 = ['paramsName', 'paramsType', 'paramsIsNull', 'paramsPath'];
    arr2.forEach(item => {
      console.log(record[item], item, record, '-==+');
      handleChange(record[item], item, record);
    });
    console.log(record, '校验');
    let tt = 0;
    for (let i in record.errorMsgShows) {
      console.log(record.errorMsgShows[i]);
      if (record.errorMsgShows[i].errorMsg != '') {
        tt = 1;
      }
    }
    // console.log(tt, '------------------------3333--dd');

    if (tt == 1) {
      return;
    }

    // console.log('--------------------------dd');
    //   const handleChange = (value: any, name: string, record: any) => {

    Object.assign(record, editableData[keys]);

    // let arr1 = record.key.split('_');

    // if (arr1.length == 1) {
    //   Object.assign(dataSource1.value.filter(item => keys === item.portsId)[0], editableData[keys]);
    //   // console.log(dataSource1.value.filter(item => keys === item.portsId)[0], '21111');
    // } else if (arr1.length == 2) {
    //   Object.assign(
    //     dataSource1.value.filter(item => {
    //       if (item.children) {
    //         return item.children.filter(i => keys == i.portsId);
    //       }
    //       console.log(item);
    //       // console.log(hh, 'hhhhhhhhhhhhhhh');
    //     })[0],
    //     editableData[keys],
    //   );
    // }
    // Object.assign(dataSource1.value.filter(item => keys === item.portsId)[0], editableData[keys]);
    changeDatas(dataSource1.value);
    delete editableData[keys];
    flagadd = 0;
  };
  // 删除
  const onDelete = (record: any, keys: number) => {
    let arr1 = record.key.split('_');
    if (arr1.length == 1) {
      dataSource1.value = dataSource1.value.filter(item => item.portsId !== keys);
    } else if (arr1.length == 2) {
      dataSource1.value.forEach(item => {
        if (item.children) {
          item.children = item.children.filter(i => keys !== i.portsId);
        }
      });
    } else if (arr1.length == 3) {
      dataSource1.value.forEach(item => {
        if (item.children) {
          item.children.forEach(i => {
            if (i.children) {
              i.children = i.children.filter(j => keys !== j.portsId);
            }
          });
        }
      });
    }
    // dataSource1.value = dataSource1.value.filter(item => item.portsId !== keys);
    changeDatas(dataSource1.value);
    // console.log(dataSource1.value);
  };
  const cancel = (keys: number) => {
    if (flagadd == 1) {
      dataSource1.value.pop();
      flagadd = 0;
    }
    delete editableData[keys];
  };
  // 随机生成数字
  let cg = () => {
    return `${Math.random() * 999}`;
  };
  let flagadd = 0;
  const handleAdd = () => {
    if (flagadd == 1) {
      message.error('请先新增完在添加下一条数据');
      return;
    }
    let newData = {};
    if (props.num == 1) {
      newData = {
        key: `${dataSource1.value.length}`,
        codesId: '',
        dirId: pinia.$state.peopleOnePageNewData.dirId,
        portsName: pinia.$state.peopleOnePageNewData.portsName,
        portsId: `${cg()}`,
        paramsName: '',
        paramsPath: 1,
        paramsIsNull: 1,
        paramsType: 1,
        paramsDefault: '',
        paramsMsg: '',
        paramsParents: 2,
        errorMsgShows: errorMsgShows,
      };
    } else if (props.num == 2) {
      newData = {
        errorMsgShows: errorMsgShows,
        key: `${dataSource1.value.length}`,
        dirId: pinia.$state.peopleOnePageNewData.dirId,
        portsName: pinia.$state.peopleOnePageNewData.portsName,
        portsId: `${cg()}`,
        // bodyId: `${dataSource1.value.length}`, //唯一标识
        bodyIsNull: 48,
        bodyLevel: 50,
        codesId: '85',
        bodyMsg: 'in sit adipisicing',
        bodyType: 52,
        bodyParents: 15,
        bodyDefault: null,
        bodyName: '认管布需金难产',
      };
    } else {
      newData = {
        key: `${dataSource1.value.length}`,
        dirId: pinia.$state.peopleOnePageNewData.dirId.toString(),
        portsName: pinia.$state.peopleOnePageNewData.portsName,
        portsId: `${cg()}`,
        returnLevel: 33,
        returnMsg: 'cilptate',
        codesId: '',
        returnName: '发发撒',
        returnType: 2,
        returnParents: 1,
        errorMsgShows: errorMsgShows,
      };
    }
    flagadd = 1;
    dataSource1.value.push(newData);
    // editableData[keys] = cloneDeep(dataSource1.value.filter(item => keys === item.key)[0]);
    editableData[newData.portsId] = cloneDeep(dataSource1.value.filter(item => newData.portsId === item.portsId)[0]);
  };

  // 码表定义弹窗开始
  let defineCodeValue: Ref<boolean> = ref(false);
  const showSavedCodeDialog = (show: string) => {
    // 子组件向外触发父组件事件“关闭”新增码表弹窗
    if (show === 'false') {
      defineCodeValue.value = false;
    } else {
      defineCodeValue.value = true;
    }
  };
  let isSaved: Ref<boolean> = ref(false);
  // 展开已引用弹窗
  const showSavedModal = () => {
    defineCodeValue.value = true;
    isSaved.value = true;
    // dialogStatue.value = 'add';
  };
  // 展开未引用弹窗
  const showNodModal = () => {
    defineCodeValue.value = true;
    isSaved.value = false;
    // dialogStatue.value = 'add';
  };
  const handleUnquoteSuccessed = () => {
    isSaved.value = true;
    console.log('222222222222222222chufale');
  };
  // 码表定义弹窗结束

  // 码值详情弹窗开始
  // let visibleCodeDetailsModalKey = ref(false);
  let visibleCodeDetailsModal: Ref<boolean[]> = ref([]);
  let showCodeDetailsModal = (key: number) => {
    if (visibleCodeDetailsModal.value !== null) {
      visibleCodeDetailsModal.value.forEach(item => {
        console.log('33333333', item);
        visibleCodeDetailsModal.value[visibleCodeDetailsModal.value.indexOf(item)] = false;
      });
      visibleCodeDetailsModal.value[key] = true;
    }
    console.log('22222222', visibleCodeDetailsModal.value);
  };
  const showCodeDefineDialog = (key: number) => {
    // 子组件向外触发父组件事件“关闭”新增码表弹窗,key为布尔数组的某一个下标
    if (key !== null) {
      visibleCodeDetailsModal.value[key] = false;
    } else {
      visibleCodeDetailsModal.value[key] = true;
    }
  };
  // 码值详情弹窗结束

  // 表单

  // const goodModelCountData: Ref<[]> = ref([]);
  const validators = (name: string, value: string): boolean => {
    for (let item in validatorRules) {
      if (name == item) {
        if (validatorRules[item].required == true && value == '') {
          return false;
        }
      } else {
        return true;
      }
    }
    // }
  };
  let flag = 0; //0个错误
  const handleChange = (value: any, name: string, record: any) => {
    //value 是当前编辑列里的文本 当前编辑的列名
    console.log(value, '222'); // 当前编辑的列
    console.log(name, '333'); // 当前编辑的列
    console.log(record, '444'); // 当前编辑的列
    // const newData = [...dataSource1.value];
    if (record) {
      const tip: boolean = validators(name, value); //tip 为 boolean 变量 用来判断是否满足校验规则
      console.log(record, '2');
      if (tip == false) {
        flag += 1;
        //tip 为false 说明校验不通过
        record.errorMsgShows[name] = {
          errorMsg: validatorRules[name].requiredMessage,
          validateStatus: 'error',
        };
      } else {
        // flag = 0;
        record.errorMsgShows[name] = {
          errorMsg: '',
          validateStatus: 'success',
        };
      }
      // console.log(editableData, '3');

      // dataSource1.value = newData;
    }
  };
  // 表格增加子级
  const addson = (record: any) => {
    if (flagadd == 1) {
      message.error('请先新增完在添加下一条数据');

      return;
    }
    flagadd = 1;
    // console.log(record, '2999999');
    //添加子集
    let keyArr = record.key.split('_');
    let child: DataItem1[] = [];
    let arr = dataSource1.value;
    if (keyArr.length === 1) {
      let ind1 = arr.findIndex((it1: any) => keyArr[0] == it1.key);
      !arr[ind1].children ? (arr[ind1].children = []) : '';
      // if (arr[ind1].children !== undefined) {
      child = arr[ind1].children;
      // }
    }
    if (keyArr.length === 2) {
      let ind1 = arr.findIndex((it1: any) => keyArr[0] == it1.key);
      let arr1Chlld = arr[ind1].children;
      let ind2 = arr1Chlld.findIndex((it2: any) => record.key == it2.key);
      if (!arr1Chlld[ind2].children) {
        arr1Chlld[ind2].children = [];
      }
      child = arr1Chlld[ind2].children;
    }
    let item = {};
    if (props.num == 1) {
      item = {
        codesId: 'MZB00022',
        portsId: parseInt(cg()),
        paramsName: '',
        paramsPath: '',
        paramsIsNull: 1,
        paramsType: 'Int',
        paramsDefault: '',
        paramsMsg: '',
        children: null,
        errorMsgShows: errorMsgShows,
        key:
          record.key +
          '_' +
          (child.length == 0
            ? '0'
            : Math.max.apply(
                Math,
                child.map((o: any) => {
                  let ind = o.key.lastIndexOf('_') + 1;
                  return o.key.slice(ind);
                }),
              ) + 1),
      };
    } else if (props.num == 2) {
      item = {
        portsId: parseInt(cg()),
        codesId: '',
        returnId: '',
        returnName: '',
        returnLevel: '',
        returnType: '',
        returnMsg: '',
        returnParents: '',
        children: null,
        errorMsgShows: errorMsgShows,
        key:
          record.key +
          '_' +
          (child.length == 0
            ? '0'
            : Math.max.apply(
                Math,
                child.map((o: any) => {
                  let ind = o.key.lastIndexOf('_') + 1;
                  return o.key.slice(ind);
                }),
              ) + 1),
      };
    } else {
      item = {
        codesId: 'MZB00022',
        portsId: parseInt(cg()),
        paramsName: '',
        paramsPath: '',
        paramsIsNull: 1,
        paramsType: 'Int',
        paramsDefault: '',
        paramsMsg: '',
        children: null,
        errorMsgShows: errorMsgShows,
        key:
          record.key +
          '_' +
          (child.length == 0
            ? '0'
            : Math.max.apply(
                Math,
                child.map((o: any) => {
                  let ind = o.key.lastIndexOf('_') + 1;
                  return o.key.slice(ind);
                }),
              ) + 1),
      };
    }

    child.push(item);
    // console.log(dataSource1.value, '是我');
    editableData[item.portsId] = cloneDeep(item);
    changeDatas(dataSource1.value);
  };
  // JSON数据导入弹窗
  let visibleJsonDataModal = ref(false);
  const handleJsonDataInShow = (datas: { show: string; data?: {} }) => {
    if (datas.show == 'false') {
      visibleJsonDataModal.value = false;
    }
    // console.log(datas.data);
    if (datas.data) {
      datas.data['key'] = `${dataSource1.value.length}`;
      datas.data['errorMsgShows'] = errorMsgShows;
      dataSource1.value.push(datas.data);
    }
  };
  const handleClickJsonIn = () => {
    visibleJsonDataModal.value = true;
    console.log(visibleJsonDataModal.value, '出发了');
  };
</script>
<style lang="less" scoped></style>
